<!-- 
  实现在 Ajax 请求开始时展现 Loading ，
  在 Ajax 请求完成时，将其中隐藏
 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>自定义事件</title>
  <style>
    #loading {
      display: none;
    }
  </style>
</head>
<body>
  <button id="btn">Start</button>
  <img id="loading" src="xxx.gif" alt="loadingImg">
  <script>
    function triggerEvent (target, eventType, eventDetail) {
      const event = new CustomEvent(eventType, {
        detail: eventDetail //  使用 detail 为事件对象传入信息
      })
      target.dispatchEvent(event)
    }

    function performAjaxOperation () {
      triggerEvent(document, 'ajax-start', { url: 'my-url' })
      setTimeout(() => {
        triggerEvent(document, 'ajax-complete')
      }, 5000)
      // 使用延时计时器模拟 Ajax 请求，开始执行时，触发 ajax-start 事件，
      // 一段时间过去之后，激活 ajax-complete 事件。传入 URL 作为额外信息。
    }

    const btn = document.getElementById('btn')

    btn.addEventListener('click', () => {
      performAjaxOperation()  //  单击按钮时，Ajax 操作开始
    })

    document.addEventListener('ajax-start', e => {
      document.getElementById('loading').style.display = 'inline-block'
      assert(e.detail.url === 'my-url', 'we can pass in event data')
      // 验证我们可以访问附加的事件数据
    })

    document.addEventListener('ajax-complete', e => {
      document.getElementById('loading').style.display = 'none'
    })
  </script>
</body>
</html>
